<!--
  @Author: lizhiqag@163.com
  @Date:   2019-06-05 10:02:10
  @Description:   [ description ]
  @Last Modified time: 2019-06-13 21:14:19
-->
<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/index_v3.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:46 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>监控数据</title>
    
    <link rel="shortcut icon" href="/static/favicon.ico"> <link href="/static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <!-- Morris -->
    <link href="/static/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="/static/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <!-- Viedo -->
    <link rel="stylesheet" href="/static/css/plugins/plyr/plyr.css">

    <link href="/static/css/animate.min.css" rel="stylesheet">
    <link href="/static/css/style.min862f.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="wrapper wrapper-content animated fadeInRight" style="padding: 5px;">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>校园南门 (负责人：李志强)</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="/detail?site=1">详细数据</a>
                                </li>
                                <li><a href="/detail?site=1">异常记录</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                        	<div class="col-sm-6">
                        		<div class="player">
		                            <video poster="/static/img/poster.jpg" autoplay controls crossorigin>
		                                <!-- Video files -->
		                                <source src="/static/video/2.mp4" type="video/mp4">
		                                <!-- <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> -->

		                                <!-- Text track file -->
		                                <!-- <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default> -->

		                                    <!-- Fallback for browsers that don't support the <video> element -->
		                                    <a href="/static/video/2.mp4">Download</a>
		                            </video>
		                        </div>
		                        <div class="flot-chart" style="height: 250px;margin-top: 20px;">
                                    <div class="flot-chart-content" id="peopleflow"></div>
                                </div>
                                <div>
                                	<table class="table">
	                                    <thead>
	                                        <tr>
	                                            <th>#</th>
	                                            <th>时间</th>
	                                            <th>人数</th>
	                                        </tr>
	                                    </thead>
	                                    <tbody>
	                                        <tr>
	                                            <td>1</td>
	                                            <td>12:12</td>
	                                            <td>23</td>
	                                        </tr>
	                                        <tr>
	                                            <td>2</td>
	                                            <td>12:13</td>
	                                            <td>25</td>
	                                        </tr>
	                                        <tr>
	                                            <td>3</td>
	                                            <td>12:14</td>
	                                            <td>29</td>
	                                        </tr>
	                                        <tr>
	                                            <td>4</td>
	                                            <td>12:15</td>
	                                            <td>32</td>
	                                        </tr>
	                                        <tr>
	                                            <td>5</td>
	                                            <td>12:16</td>
	                                            <td>60</td>
	                                        </tr>
	                                        <tr>
	                                            <td align="center" colspan="3"><a href="javascript:;">更多...</a></td>
	                                        </tr>                                                                                
	                                    </tbody>
	                                </table>
                                </div>
                        	</div>
                        	<div class="col-sm-6">
                        		<div class="row">
		                            <div class="col-sm-12">
		                                <div class="m-b-md">
		                                    <a href="/setting" class="btn btn-white btn-xs pull-right">修改</a>
		                                    <h2>校园南门</h2>
		                                </div>
		                            </div>
		                        </div>
		                        <div class="row">
		                            <div class="col-sm-12">
		                                <dl class="dl-horizontal">
		                                    <dt>当前状态：</dt>
		                                    <dd><span class="label label-primary">正常</span>
		                                    </dd>
		                                </dl>
		                            </div>
		                        </div>
		                        <div class="row">
		                            <div class="col-sm-8">
		                                <dl class="dl-horizontal">

		                                    <dt>负责人：</dt>
		                                    <dd>Beaut-zihan</dd>
		                                    <p></p>
		                                    <dt>联系方式：</dt>
		                                    <dd>iv2013@qq.com</dd>
		                                    <p></p>
		                                    <dt>报警阈值：</dt>
		                                    <dd>60</dd>
		                                    <p></p>
		                                    <dt>人流量爆发次数：</dt>
		                                    <dd>12</dd>
		                                    <p></p>
		                                    <dt>所使用的算法：</dt>
		                                    <dd>HOG+SVM</dd>
		                                </dl>
		                            </div>
		                            <!-- <div class="col-sm-7" id="cluster_info">
		                                <dl class="dl-horizontal">

		                                    <dt>最后更新：</dt>
		                                    <dd>2014年 11月7日 22:03</dd>
		                                    <dt>创建于：</dt>
		                                    <dd>2014年 2月16日 03:01</dd>
		                                    <dt>团队成员：</dt>
		                                    <dd class="project-people">
		                                        <a href="project_detail.html">
		                                            <img alt="image" class="img-circle" src="img/a3.jpg">
		                                        </a>
		                                        <a href="project_detail.html">
		                                            <img alt="image" class="img-circle" src="img/a1.jpg">
		                                        </a>
		                                        <a href="project_detail.html">
		                                            <img alt="image" class="img-circle" src="img/a2.jpg">
		                                        </a>
		                                        <a href="project_detail.html">
		                                            <img alt="image" class="img-circle" src="img/a4.jpg">
		                                        </a>
		                                        <a href="project_detail.html">
		                                            <img alt="image" class="img-circle" src="img/a5.jpg">
		                                        </a>
		                                    </dd>
		                                </dl>
		                            </div> -->
		                        </div>
		                        <div class="row">
		                            <div class="col-sm-12">
		                                <dl class="dl-horizontal">
		                                    <dt>当前人数：</dt>
		                                    <dd>
		                                        <div class="progress progress-striped m-b-sm">
		                                            <div style="width: 60%;" class="progress-bar"></div>
		                                        </div>
		                                        <small>当前人数为 <strong>60人</strong></small>
		                                    </dd>
		                                </dl>
		                            </div>
		                        </div>
		                        <div class="row m-t-sm">
		                            <div class="col-sm-12">
		                                <div class="panel blank-panel">
		                                    <div class="panel-heading">
		                                        <div class="panel-options">
		                                            <ul class="nav nav-tabs">
		                                                <li><a href="project_detail.html#tab-1" data-toggle="tab">动态</a>
		                                                </li>
		                                                <li class=""><a href="project_detail.html#tab-2" data-toggle="tab">报警历史</a>
		                                                </li>
		                                            </ul>
		                                        </div>
		                                    </div>

		                                    <div class="panel-body">

		                                        <div class="tab-content">
		                                            <div class="tab-pane active" id="tab-1">
		                                                <div class="feed-activity-list">
		                                                    <div class="feed-element">
		                                                        <a href="profile.html#" class="pull-left">
		                                                            <img alt="image" class="img-circle" src="/static/img/notice.png">
		                                                        </a>
		                                                        <div class="media-body ">
		                                                            <small class="pull-right text-navy">1天前</small>
		                                                            <strong>校园南门</strong> 人数超过 <strong>60</strong>.
		                                                            <br>
		                                                            <small class="text-muted">54分钟前 来自 边缘端1号</small>
		                                                            <!-- <div class="actions">
		                                                                <a class="btn btn-xs btn-white"><i class="fa fa-thumbs-up"></i> 赞 </a>
		                                                                <a class="btn btn-xs btn-danger"><i class="fa fa-heart"></i> 收藏</a>
		                                                            </div> -->
		                                                        </div>
		                                                    </div>

		                                                    <div class="feed-element">
		                                                        <a href="profile.html#" class="pull-left">
		                                                            <img alt="image" class="img-circle" src="/static/img/notice.png">
		                                                        </a>
		                                                        <div class="media-body ">
		                                                            <small class="pull-right">1天前</small>
		                                                            <strong>校园南门</strong> 人数超过60
		                                                            <br>
		                                                            <small class="text-muted">今天 10:20 来自 边缘端1号</small>

		                                                        </div>
		                                                    </div>

		                                                    <div class="feed-element">
		                                                        <a href="profile.html#" class="pull-left">
		                                                            <img alt="image" class="img-circle" src="/static/img/notice.png">
		                                                        </a>
		                                                        <div class="media-body ">
		                                                            <small class="pull-right">2天前</small>
		                                                            <strong>校园南门</strong> 人数超过60
		                                                            <br>
		                                                            <small class="text-muted">11月7日 11:56 来自 边缘端1号</small>

		                                                        </div>
		                                                    </div>
		                                                </div>

		                                            </div>
		                                            <div class="tab-pane" id="tab-2">

		                                                <table class="table table-striped">
		                                                    <thead>
		                                                        <tr>
		                                                            <th>状态</th>
		                                                            <th>异常信息</th>
		                                                            <th>开始时间</th>
		                                                            <th>结束时间</th>
		                                                            <th>说明</th>
		                                                        </tr>
		                                                    </thead>
		                                                    <tbody>
		                                                        <tr>
		                                                            <td>
		                                                                <span class="label label-primary"><i class="fa fa-check"></i> 已处理</span>
		                                                            </td>
		                                                            <td>
		                                                                人流爆发
		                                                            </td>
		                                                            <td>
		                                                                11月7日 22:03
		                                                            </td>
		                                                            <td>
		                                                                11月7日 20:11
		                                                            </td>
		                                                            <td>
		                                                                <p class="small">
		                                                                    该地点人数大于所设阈值，发出警告
		                                                                </p>
		                                                            </td>

		                                                        </tr>
		                                                        <tr>
		                                                            <td>
		                                                                <span class="label label-primary"><i class="fa fa-check"></i> 处理中</span>
		                                                            </td>
		                                                            <td>
		                                                                人流爆发
		                                                            </td>
		                                                            <td>
		                                                                11月7日 22:03
		                                                            </td>
		                                                            <td>
		                                                                11月7日 20:11
		                                                            </td>
		                                                            <td>
		                                                                <p class="small">
		                                                                    该地点人数大于所设阈值，发出警告
		                                                                </p>
		                                                            </td>

		                                                        </tr>
		                                                        <tr>
		                                                            <td>
		                                                                <span class="label label-primary"><i class="fa fa-check"></i> 处理中</span>
		                                                            </td>
		                                                            <td>
		                                                                疑似盗窃
		                                                            </td>
		                                                            <td>
		                                                                11月7日 22:03
		                                                            </td>
		                                                            <td>
		                                                                11月7日 20:11
		                                                            </td>
		                                                            <td>
		                                                                <p class="small">
		                                                                    系统检测到视频中存在异常行为
		                                                                </p>
		                                                            </td>

		                                                        </tr>


		                                                    </tbody>
		                                                </table>

		                                            </div>
		                                        </div>

		                                    </div>

		                                </div>
		                            </div>
			                    </div>
                        	</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="/static/js/plugins/flot/jquery.flot.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="/static/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="/static/js/demo/peity-demo.min.js"></script>
    <script src="/static/js/content.min.js?v=1.0.0"></script>
    <script src="/static/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="/static/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/static/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="/static/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="/static/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="/static/js/demo/sparkline-demo.min.js"></script>
    <script src="/static/js/plugins/echarts/echarts-all.js"></script>
    <script src="/static/js/plugins/plyr/plyr.js"></script>
    <script>
        (function(d,u){var a=new XMLHttpRequest(),b=d.body;if("withCredentials" in a){a.open("GET",u,true);a.send();a.onload=function(){var c=d.createElement("div");c.setAttribute("hidden","");c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}}})(document, "/static/css/plugins/plyr/sprite.svg");
        // plyr.setup('video', { controls: ['play-large'] });//只显示大按钮
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('peopleflow'));

        sites = []  //地点信息
        order = []  //地点人流量次序
        lastTime = ['','','','','','','']   //最后一次记录时间

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            animation: false,
            legend: {
                data:[]
            },
            tooltip:{
                show: true
            },
            xAxis: {
                name: '时间 / s',
                data: []
            },
            color:['#ff7f50','#87cefa','#cc5555'],
            yAxis: {},
            series: [],

        };

        function cmp(x,y)
        {
            return option.series[y].data[option.series[y].data.length - 1] - option.series[x].data[option.series[x].data.length - 1]
        }

        function initData()
        {
            // 获取地点信息、阈值
            $.get('/getSites',function(res){
                sites = res
                // 初始化地点次序
                for(var t = 0;t < sites.length;t++)
                    order.push(t)
                option.legend.data = sites.map(x=>{return x.fields.sname})
                // console.log(option.legend.data)
                // 获取每个地点最近人流量
                var s = sites.length

                $.each(sites,function(index,site){
                    // console.log(index,site)
                    $.get('/peoplecount/selectNewest?limit=60&site=' + site.pk,function(res){
                        // console.log(res)
                        // 记录当前最后一个人流记录的时间
                        lastTime[index] = res[0].fields.rtime
                        res.reverse()
                        // 系列数据
                        var serie = {
                            name: site.fields.sname,
                            type: 'line',
                            data: res.map(x=>{return x.fields.rnum}),
                            markLine: {
                                symbol:'none',
                                data: [
                                    {name: '警戒线',yAxis: site.fields.salarm},
                                ]
                            }
                        }
                        option.series.push(serie)
                        // console.log(option)
                        s--
                        if(s == 0)
                        {
                            myChart.setOption(option)
                            order.sort(cmp)
                        }
                    })
                })
            })
        }
        initData()

        //初始化数据
        // time = ['1','2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60']
        // data = [39, 52, 40, 11, 6, 50, 10, 47, 9, 32, 35, 45, 43, 29, 33, 37, 14, 22, 40, 50, 39, 18, 56, 7, 4, 4, 17, 32, 33, 36, 51, 38, 9, 57, 13, 25, 36, 23, 23, 8, 28, 41, 35, 28, 13, 33, 39, 53, 3, 5, 26, 14, 28, 47, 54, 34, 9, 24, 27, 52]
        // option.xAxis.data = time
        // option.series[0].data = data
        //初次渲染
        // myChart.setOption(option)
        //定时刷新
        setInterval(function(){
            var s = sites.length

            $.each(sites,function(index,site){
                $.get('/peoplecount/selectNewest?limit=1&site=' + site.pk,function(res){
                    var time = res[0].fields.rtime
                    // console.log(time)
                    // console.log(lastTime[index])
                    if (time != lastTime[index]) {
                        option.series[index].data.shift()
                        option.series[index].data.push(res[0].fields.rnum)
                        lastTime[index] = time
                    }
                    s--
                    if(s == 0)
                    {
                        order.sort(cmp)
                        $('#countOrder').html('')
                        for(var i = 0;i < sites.length;i++)
                        {
                            if (sites[i].pk == 1) {
                                $('#countOrder').append('<li><h2 class="no-margins">' + option.series[order[i]].data[option.series[order[i]].data.length - 1] + '</h2><small>' + sites[order[i]].fields.sname + ' （人流异常高发）</small><div class="stat-percent"><i class="fa fa-circle text-navy"> 监测中</i></div><div class="progress progress-mini"><div style="width: ' + option.series[order[i]].data[option.series[order[i]].data.length - 1] + '%;" class="progress-bar"></div></div></li>')
                            }else{
                                $('#countOrder').append('<li><h2 class="no-margins">' + option.series[order[i]].data[option.series[order[i]].data.length - 1] + '</h2><small>' + sites[order[i]].fields.sname + '</small><div class="stat-percent"><i class="fa fa-circle text-navy"> 监测中</i></div><div class="progress progress-mini"><div style="width: ' + option.series[order[i]].data[option.series[order[i]].data.length - 1] + '%;" class="progress-bar"></div></div></li>')
                            }
                        }
                        myChart.setOption(option)
                        
                        s = sites.length
                    }
                })
            })

        },1000)
    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>


<!-- Mirrored from www.zi-han.net/theme/hplus/index_v3.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:49 GMT -->
</html>
